<template>
	<view class="pageContainer" :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>dataList</view>
				<view>Array(Object)</view>
				<view>primary</view>
				<view>数据集，详情见下</view>
			</view>
			<view class="tr">
				<view>value</view>
				<view>String, Number</view>
				<view>0</view>
				<view>当前步骤号，从0开始。优先于dataList内的current</view>
			</view>
			<view class="tr">
				<view>vertical</view>
				<view>Boolean</view>
				<view>false</view>
				<view>是否垂直类型</view>
			</view>
			<view class="tr">
				<view>custom</view>
				<view>String</view>
				<view>无</view>
				<view>自定义样式方案名，使用后样式由custom.scss定义</view>
			</view>
			<view class="tr">
				<view>alignment</view>
				<view>String</view>
				<view>无</view>
				<view>内容对齐，标题与描述位于轴线的哪一侧。before，after，across(水平模式)。使用custom后无效</view>
			</view>
			<view class="tr">
				<view>radius</view>
				<view>String</view>
				<view>无</view>
				<view>步骤点圆角。使用custom后无效</view>
			</view>
			<view class="tr">
				<view>plain</view>
				<view>Boolean</view>
				<view>false</view>
				<view>步骤点镂空。使用custom后无效</view>
			</view>
			<view class="tr">
				<view>borderWidth</view>
				<view>String, Number</view>
				<view>无</view>
				<view>步骤点边框宽度，开启步骤点镂空后有效。使用custom后无效</view>
			</view>
			<view class="tr">
				<view>titleBold</view>
				<view>Boolean</view>
				<view>false</view>
				<view>标题加粗。使用custom后无效</view>
			</view>
			<view class="tr">
				<view>defaultType</view>
				<view>String</view>
				<view>无</view>
				<view>步骤点默认状态主题色。使用custom后无效</view>
			</view>
			<view class="tr">
				<view>defaultColor</view>
				<view>String</view>
				<view>无</view>
				<view>步骤点默认状态自定义主题色。使用custom后无效</view>
			</view>
			<view class="tr">
				<view>defaultTextColor</view>
				<view>String</view>
				<view>无</view>
				<view>步骤点默认状态自定义文字色。使用custom后无效</view>
			</view>
			<view class="tr">
				<view>defaultTitleColor</view>
				<view>String</view>
				<view>无</view>
				<view>默认状态标题颜色。使用custom后无效</view>
			</view>
			<view class="tr">
				<view>defaultDescribeColor</view>
				<view>String</view>
				<view>无</view>
				<view>默认状态说明文字颜色。使用custom后无效</view>
			</view>
			<view class="tr">
				<view>currentType</view>
				<view>String</view>
				<view>无</view>
				<view>步骤点激活状态主题色。使用custom后无效</view>
			</view>
			<view class="tr">
				<view>currentColor</view>
				<view>String</view>
				<view>无</view>
				<view>步骤点激活状态自定义主题色。使用custom后无效</view>
			</view>
			<view class="tr">
				<view>currentTextColor</view>
				<view>String</view>
				<view>无</view>
				<view>步骤点激活状态自定义文字色。使用custom后无效</view>
			</view>
			<view class="tr">
				<view>currentTitleColor</view>
				<view>String</view>
				<view>无</view>
				<view>激活状态标题颜色。使用custom后无效</view>
			</view>
			<view class="tr">
				<view>currentDescribeColor</view>
				<view>String</view>
				<view>无</view>
				<view>激活状态说明文字颜色。使用custom后无效</view>
			</view>
			<view class="tr">
				<view>lineType</view>
				<view>String</view>
				<view>无</view>
				<view>步骤线激活状态主题色。使用custom后无效</view>
			</view>
			<view class="tr">
				<view>lineColor</view>
				<view>String</view>
				<view>无</view>
				<view>步骤线激活状态自定义主题色。使用custom后无效</view>
			</view>
			<view class="tr">
				<view>lineBgColor</view>
				<view>String</view>
				<view>无</view>
				<view>步骤线背景色。使用custom后无效</view>
			</view>
			<view class="tr">
				<view>lineHeight</view>
				<view>String</view>
				<view>无</view>
				<view>步骤线宽度。使用custom后无效</view>
			</view>
			<view class="tr">
				<view>defaultIcon</view>
				<view>String</view>
				<view>无</view>
				<view>默认状态显示的图标</view>
			</view>
			<view class="tr">
				<view>doneIcon</view>
				<view>String</view>
				<view>无</view>
				<view>完成状态显示的图标</view>
			</view>
			<view class="tr">
				<view>currentIcon</view>
				<view>String</view>
				<view>无</view>
				<view>当前步骤状态显示的图标</view>
			</view>
			<view class="tr">
				<view>pointSize</view>
				<view>Number</view>
				<view>无</view>
				<view>步骤点尺寸，以2em进行放大的倍数</view>
			</view>
		</view>
		
		<view class="p-sm">
			<vi-collapse title="数据集 dataList" headClass="bgColor-contrast" boxClass="b-default">
				<view class="docSubTable">
					<view class="th">
						<view>属性名</view>
						<view>类型</view>
						<view>默认值</view>
						<view>描述</view>
					</view>
					<view class="tr">
						<view>index</view>
						<view>Number</view>
						<view>步骤号。不设置则填充序号</view>
					</view>
					<view class="tr">
						<view>title</view>
						<view>String</view>
						<view>标题</view>
					</view>
					<view class="tr">
						<view>describe</view>
						<view>String</view>
						<view>说明文字</view>
					</view>
					<view class="tr">
						<view>current</view>
						<view>Boolean</view>
						<view>指示为当前步骤</view>
					</view>
					<view class="tr">
						<view>defaultIcon</view>
						<view>String</view>
						<view>默认状态显示的图标，优先于步骤号</view>
					</view>
					<view class="tr">
						<view>doneIcon</view>
						<view>String</view>
						<view>完成状态显示的图标，优先于步骤号</view>
					</view>
					<view class="tr">
						<view>currentIcon</view>
						<view>String</view>
						<view>当前状态显示的图标，优先于步骤号</view>
					</view>
				</view>
			</vi-collapse>
		</view>
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：{{`&lt;vi-steps :value="当前步骤" :dataList="数据集">&lt;/vi-steps>`}}
			</view>
			<view class="p-md fbox">
				<vi-button type="default" size="sm" width="45%" @click="setVal(1)">加</vi-button>
				<vi-button type="default" size="sm" width="45%" @click="setVal(-1)">减</vi-button>
			</view>
			<view class="py-sm">
				<view class="my-md">默认样式：</view>
				<vi-steps v-model="value" :dataList="dataList"></vi-steps>
				<view class="my-md">标题置顶：</view>
				<vi-steps v-model="value" :dataList="dataList" alignment="before"></vi-steps>
				<view class="my-md">两端排列：</view>
				<vi-steps v-model="value" :dataList="dataList" alignment="across" plain></vi-steps>
				<view class="my-md">使用图标：</view>
				<vi-steps v-model="value" :dataList="dataList" radius="0.5em" defaultIcon="icon-point" currentIcon="icon-clock" doneIcon="icon-checked" plain></vi-steps>
			</view>
			<view class="p-md fbox">
				<vi-button type="default" size="sm" width="45%" @click="setVal(1)">加</vi-button>
				<vi-button type="default" size="sm" width="45%" @click="setVal(-1)">减</vi-button>
			</view>
			<view class="py-sm fbox">
				<view class="w-50">
					<view class="my-md">垂直样式：</view>
					<vi-steps v-model="value" :dataList="dataList" vertical></vi-steps>
				</view>
				<view class="w-50">
					<view class="my-md">右侧排列：</view>
					<vi-steps v-model="value" :dataList="dataList" vertical alignment="before"></vi-steps>
				</view>
			</view>
			<view class="py-sm">
				<view class="my-md">自定义样式：</view>
				<view class="py-sm">
					<vi-steps v-model="value" :dataList="dataList" custom="theme1"></vi-steps>
				</view>
				<view class="py-sm">
					<vi-steps v-model="value" :dataList="dataList" custom="theme2"></vi-steps>
				</view>
				<view class="py-sm">
					<vi-steps v-model="value" :dataList="dataList" custom="theme3"></vi-steps>
				</view>
			</view>
			<view class="p-md fbox">
				<vi-button type="default" size="sm" width="45%" @click="setVal(1)">加</vi-button>
				<vi-button type="default" size="sm" width="45%" @click="setVal(-1)">减</vi-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:1,
				dataList:[
					{title:"步骤1",describe:"说明1"},
					{title:"步骤2",describe:"说明2"},
					{title:"步骤3",describe:"说明3"},
					{title:"步骤4",describe:"说明4"}
				]
			}
		},
		methods: {
			setVal(val){
				this.value +=val;
				if(this.value>=this.dataList.length){
					this.value = this.dataList.length-1
				}else if(this.value<0){
					this.value =0
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.pageContainer{
	
}
</style>
